import React, { useEffect, useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
import 'moment/dist/locale/zh-cn'
import { DatePicker, } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;
const { Option } = Select;

interface AdvancedSearchFormProps {
  onSearch: (values: any) => void;
}
interface AdvancedSearchFormProps {

  onSearch: (values: any) => void;
}
export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({ onSearch }) => {
  const onFinish = (values: any) => {
    onSearch(values);
  };
  const [form] = Form.useForm();
  const { token } = theme.useToken();
  const [expand, setExpand] = useState(false);

  const formStyle: React.CSSProperties = {
    maxWidth: 'none',
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 24,
  };

  const getFields = () => {
    const count = expand ? 10 : 6;
    const children = [];

    children.push(
      <Col span={6}>

        <Form.Item
          name='status'
          label='订单状态'

          initialValue="0"
        >
          <Select>
            <Option value="0" selected>全部</Option>
            <Option value="1" selected>待付款</Option>
            <Option value="2">待发货</Option>
            <Option value="3">待收货</Option>
            <Option value="4">待评价</Option>
            <Option value="5">成功</Option>
            <Option value="6">失败</Option>
          </Select>
        </Form.Item>
      </Col>,


      <Col span={6}>
        <Form.Item
          name="dateRange"
          label="选择日期范围"
        >
          <RangePicker format="YYYY-MM-DD" />
        </Form.Item>
      </Col>
    );

    return children;
  };



  return <>
    <div>
      <Button
        type="primary"
        className="mb-5"
        icon={<ArrowLeftOutlined />}
        onClick={() => {
          // Navigate back to the previous route
          history.back();
        }}
      >
        返回
      </Button>
    </div>
    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
      <Row gutter={24}>{getFields()}</Row>

      <div style={{ textAlign: 'right' }}>
        <Space size="small">
          <Button
            onClick={() => {
              //form.submit();
            }}

            htmlType="submit"
            type="primary">搜素</Button>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
          <a
            style={{ fontSize: 12 }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            <DownOutlined rotate={expand ? 180 : 0} />展开
          </a>
        </Space>
      </div>
    </Form>
  </>



};